@import "../../src/css/Calendar.less";
@import "Layer.less";
@import "MonthView.less";

// core variable overrides
@esui-calendar-height: @esui-single-line-control-height;

// theme variables
@esui-calendar-border: none;
@esui-calendar-background: @esui-palette-neutral-color;
@esui-calendar-color: @esui-palette-color;
@esui-calendar-hover-background: @esui-palette-neutral-highlight-color;
@esui-calendar-active-arrow-color: @esui-palette-primary-color;
@esui-calendar-active-background: @esui-palette-neutral-shadow-color;

@esui-calendar-readonly-color: @esui-palette-muted-color;
@esui-calendar-readonly-background: @esui-palette-neutral-color;

.esui-calendar-theme() {
    background: @esui-calendar-background;
    border: @esui-calendar-border;
    color: @esui-calendar-color;
    &:focus,
    &:hover {
        background: @esui-calendar-hover-background;
        .@{ui-class-prefix}-calendar-arrow {
            color: @esui-calendar-active-arrow-color;
        }
    }
    &.@{ui-state-prefix}-active {
        background: @esui-calendar-active-background;
    }
    &.@{ui-state-prefix}-read-only {
        color: @esui-calendar-readonly-color;
        background: @esui-calendar-readonly-background;
    }
    &.@{ui-state-prefix}-disabled,
    &.@{ui-state-prefix}-read-only {
        .@{ui-class-prefix}-calendar-arrow {
            color: @esui-calendar-color;
        }
    }
}